import React from 'react';


import classnames from 'classnames';
//component
import ReIcon from 'components/widgets/ReIcon';

import './index.less';


export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {
        //name: 'component name'
    };


    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {
            currentPageIndex: 0,
            bannerNotClick:false,
        };
    }

    componentWillMount() {
        this._isMounted = true;

    }

    componentDidMount() {
        setTimeout(() => {
            this.setSliderWidth();
            this.initSlider();
        }, 20);
        $$.utils.EventUtil.addListener(global.window, 'resize', () => {
            this.setSliderWidth(true);
            this.dotClick(this.state.currentPageIndex);
        });
        $$.utils.EventUtil.addListener(global.window, 'orientationchange', () => {
            setTimeout(() => {
                this.setSliderWidth();
                this.initSlider();
                this.dotClick(this.state.currentPageIndex);
            }, 20);
        });
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.visible !== this.props.visible && this.refs.scrollWrapper) {
            this.refs.scrollWrapper.scrollTop = 0;
        }
    }

    setSliderWidth(isResize) {
        if (this.refs.sliderGroup) {
            this.children = this.refs.sliderGroup.children;
            let width = 0;
            let sliderWidth = this.refs.slider.clientWidth;
            for (let i = 0; i < this.children.length; i++) {
                let child = this.children[i];
                child.style.width = sliderWidth + 'px';
                width += sliderWidth;
            }
            if (!isResize) {
                // width += 2 * sliderWidth;
            }
            this.refs.sliderGroup.style.width = width + 'px';
        }
    }

    initSlider() {
        this.slider = new BScroll(this.refs.slider, {
            scrollX: true,
            scrollY: false,
            momentum: false,
            snap: {loop: false},
            eventPassthrough: 'vertical',
            snapThreshold: 0.3,
            snapSpeed: 400,
            click: true,
        });
        this.slider.on('scrollEnd', () => {
            let pageIndex = this.slider.getCurrentPage().pageX;
            this.setState({ currentPageIndex: pageIndex });
        });
    }
    dotClick(index) {
        this.setState({ currentPageIndex: index });
        let pageIndex = index;
        this.slider.goToPage(pageIndex, 0, 400);
    }

    render() {
        const {visible, createHandle, closeHandle} = this.props;

        const maskClass = classnames({
            'create-guide-mask': true,
            'show': visible
        });
        let toolList = [{
            title: '少儿',
            img: '/assets/images/components/widgets/CreateGuide/images/children.png',
        }, {
            title: '艺术家',
            img: '/assets/images/components/widgets/CreateGuide/images/personal.png',
        }, {
            title: '机构',
            img: '/assets/images/components/widgets/CreateGuide/images/org.png',
        }];

        return (
            <div className="orin-w-createguide-root">
                <div className={maskClass}>
                    <div className="fix-bottom-btn-wrapper" onClick={() => createHandle && createHandle()}>
                        开始布展
                    </div>
                    <div className="create-guide-wrapper" ref="scrollWrapper">
                        <span className="logo-wrapper">
                            <img className="logo-image"
                                 src="/assets/images/components/widgets/CreateGuide/images/logo.png" alt=""/>
                        </span>
                        <span className="close-wrapper" onClick={() => closeHandle && closeHandle()}>
                            <ReIcon icon="window_closes" className="icon"/>
                        </span>
                        <span className="next-wrapper">
                            <ReIcon icon="xiala" className="icon"/>
                        </span>
                        <div className="first-page">
                            <div className="top">
                                <img className="text-image"
                                     src="/assets/images/components/widgets/CreateGuide/images/text.png" alt=""/>
                                <img className="group-image"
                                     src="/assets/images/components/widgets/CreateGuide/images/group.png" alt=""/>
                                <img className="landscape-group-image"
                                     src="/assets/images/components/widgets/CreateGuide/images/landscape_ground.png"
                                     alt=""/>
                            </div>
                            <div className="bottom">
                                <div className="bottom-cover"/>
                                <img className="bottom-image"
                                     src="/assets/images/components/widgets/CreateGuide/images/bottom_guan.png" alt=""/>
                            </div>
                        </div>
                        <div className="second-page">
                            <div className="text-wrapper">
                                <img className="text-image"
                                     src="/assets/images/components/widgets/CreateGuide/images/second-text.png" alt=""/>
                                <img className="text-image-v"
                                     src="/assets/images/components/widgets/CreateGuide/images/v-text.png" alt=""/>
                            </div>
                            <div className="img-wrapper">
                                <div className="dot-wrapper">
                                    {
                                        toolList.map((item, index) => {
                                            return (
                                                <span key={index}
                                                      onClick={(e) => this.dotClick(index)}
                                                      className={index === this.state.currentPageIndex ? 'dot active' : 'dot'}>
                                                    {item.title}
                                    </span>
                                            )
                                        })
                                    }
                                </div>
                                <div className="slider-wrapper" ref="slider">
                                    <div className="slide-img" ref="sliderGroup">
                                        {
                                            toolList.map((item, index) => {
                                                return (
                                                    <div key={index}
                                                         className="guide-banner">
                                                        <div className="img-wrap">
                                                            <img src={item.img} alt=""/>
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

            </div>
        );
    }
}
